import { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { Header } from '../Header';
import ContentContainer from '../ContentContainer';
import Box from '@mui/joy/Box';
import { Toolbar, useVM } from '@todo/ui';

import LoginPage from '../../../auth/view/LoginPage.tsx';
import { AuthService } from '../../../auth/service/auth.service.ts';
import Stack from '@mui/joy/Stack';
import { Sidebar } from '../Sidebar';

const Layout: FC = () => {
  const vm = useVM(AuthService);

  if (!vm.authenticated) {
    return <LoginPage />;
  }
  return (
    <Stack flexDirection="row">
      <Sidebar />
      <Header />

      <Box
        sx={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Toolbar />
        <Box sx={{ height: '100%', width: '100%', p: 4 }}>
          <ContentContainer />
        </Box>
      </Box>
    </Stack>
  );
};

export default observer(Layout);
